<template>
  <div id="selected">
    <div class="top">
      <div class="top-box">
        <div class="serch">
          <img
            src=""
            alt=""
          />
          <span>原始猎食渴望Orijen</span>
        </div>
        <span class="topimg2"></span>
      </div>
    </div>
    <div class="banner-box">
      <!-- 大轮播 -->
<div class="banner">
      <LunBoVue :swiper="lunbo.data.images" v-if="lunbo.data" />
    </div>
    <!-- 养宠有方 -->
      <div class="raise">
        <img src="https://static.epetbar.com/mini_images/emall/index/index1.png" alt="">
        <div class="biao">
          <img src="https://static.epetbar.com/mini_images/emall/index/index2.png" alt="">
        </div>
    </div>
    </div>
    <!-- 菜单 -->
  <div class="brand">
  <CaiDanVue :caidan="caidan"/>
</div>
<!-- 小轮播 -->
<div class="banner-small">
<XlunBoVue :xiao_lunbo="xiao_lunbo.data.images" v-if="xiao_lunbo.data"/>
</div>
<!-- 人气top -->
   <div class="popularity">
<img src="https://img2.epetbar.com/2023-11/21/11/563d03df3db7d1b7cb036e1de7989c2a.jpg?x-oss-process=style/water" alt="">
   </div>
   <!-- 单单有礼 -->
   <div class="single">
<DanDanVue/>
   </div>
   <div class="grab" >
<GrabQiangVue :fengqiang="fengqiang.data.goods"/>
   </div>
   <div class="week">
<WeekWeekVue :fengqiang="fengqiang.data.goods"/>
   </div>
   <div class="like">
<GuessLikeVue :xihuan="xihuan.data.list"/>
   </div>
 
  </div>
</template>

<script>
import jsonp from "jsonp";
import LunBoVue from "@/components/LunBo.vue";
import CaiDanVue from '@/components/CaiDan.vue';
import XlunBoVue from '@/components/XlunBo.vue';
import DanDanVue from '@/components/DanDan.vue';
import GrabQiangVue from '@/components/GrabQiang.vue';
import WeekWeekVue from '@/components/WeekWeek.vue';
import GuessLikeVue from '@/components/GuessLike.vue';
export default {
  components: { LunBoVue,CaiDanVue,XlunBoVue,DanDanVue,GrabQiangVue,WeekWeekVue,GuessLikeVue},
  data() {
    return {
      lunbo: {},
      caidan: {},
      xiao_lunbo: {},
      dandan:{},
     fengqiang:{},
     xihuan:{}
    };
  },
  methods: {
    getData() {
      console.log(jsonp);
      let url =
        "https://mall.api.epet.com/v3/index/home.html?pet_type=dog&version=596&is_single=0&isWeb=1&system=wap&distinct_id=18f04e4afbc2a0-0d0cec43b46dd8-26001a51-1338645-18f04e4afbd9d4&debug_param=";
      jsonp(url, {}, (err, data) => {
        if (err) {
          alert("请求跨域失败");
        } else {
          let data_ = data.datas.list;
          console.log(data_);
          //把第一次请求到的数据存入本地，以后就从本地获取，不在请求接口了
          localStorage.setItem("home", JSON.stringify(data_));
          this.format(data_);
        }
      });
    },
    format(data) {
    let [lunbo, caidan, xiao_lunbo,dandan,a,b,fengqiang,c,xihuan] = data;
    this.lunbo = lunbo;
    this.caidan = caidan;
    this.xiao_lunbo = xiao_lunbo;
    this.dandan=dandan;
    this.a = a;
    this.b = b;
    this.fengqiang=fengqiang;
    this.c=c;
    this.xihuan=xihuan
  },
  },
  
  mounted() {
    //先读取本地存储，如果有就直接读本地的，没有再去走接口
    let data = localStorage.getItem("home");
    if (data) {
      this.format(JSON.parse(data));
    } else {
      this.getData();
    }
  },  
};


</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
body{
overflow-y:auto;
overflow-x:hidden
}
#selected {
 
padding-top: 60px;
position: relative;
  .top {
    width: 100%;
    height: 60px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    .top-box {
      height: 30px;
      margin-top: 15px;
      box-sizing: border-box;
      padding-left: 15px;
      padding-right: 15px;
      display: flex;
      .serch {
        width: 291px;
        height: 30px;
        color: #333333;
        background-color: #f7f7f7;
        border-radius: 15px;
        padding-left: 13px;
        img {
          width: 10px;
          display: inline-block;
        }
        span {
          font-size: 12px;
          color: #666;
          margin-left: 3px;
          height: 30px;
          line-height: 30px;
          display: inline-block;
        }
      }
      .topimg2 {
        display: inline-block;
        width: 25px;
        height: 25px;
        background: url()
          no-repeat;
        background-size: 100% 100%;
        margin-left: 15px;
      }
    }
  }
  .banner-box{
    width: 100%;
    height: auto;
    background-color: white;
    margin-top: -10px;
      .banner {
    width: 355px;
    height: 150px;
    margin: 0 auto;
  }
  .raise{
     width: 355px;
        height: 88px;
        margin: 0 auto;
    img{
        width: 355px;
        height: 60px;

    }
    .biao{
      width: 36px;
      height: 45px;
      position: relative;
      top: -65px;
      left: 290px;
      img{
        width: 100%;
        height: 100%;
      }
    }
}
  }
  .banner-small{
    width: 100%;
    height: 93px;
  }
.popularity{
  img{
      height: 40.6867px;
  }
}
.single{
  width: 365.43px;
  height: 152.95px;


}
.day{
  width: 100%;
  height: 500px;
  background-color: palegoldenrod;
}
}
</style>